<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC 
	"-//W3C//DTD XHTML 1.1 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dishes</title>
<!-- Include one of jTable styles. -->
<link href="${ctx}/js/jtable.2.3.1/themes/jqueryui/jtable_jqueryui.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/js/jquery-ui-1.10.3/development-bundle/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
        #QuickImageLinks
        {
            text-align: center;
        }
        
        #QuickImageLinks img
        {
            border: none;
            margin: 0px;
            padding: 0px;
        }
        
        .child-opener-image
        {
            cursor: pointer;
        }

        
        .child-opener-image-column
        {
            text-align: center;
        }
        
        .jtable-dialog-form
        {
            min-width: 220px;
        }
        
        .jtable-dialog-form input[type="text"]
        {
            min-width: 200px;
        }
</style>
<!-- Include jTable script file. -->

<script src="${ctx}/js/jquery-ui-1.10.3/jquery-1.9.1.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery-ui-1.10.3/ui/jquery-ui.js" type="text/javascript"></script>
<script src="${ctx}/js/jtable.2.3.1/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $('#OrderTableContainer').jtable({
            title: 'Order List',
            paging: true, //Enable paging
            sorting: true, //Enable sorting
            columnResizable: false, //Disable column resizing
            columnSelectable: false, //Disable column selecting
            defaultSorting: 'id ASC',
            openChildAsAccordion: true,
            actions: {
                listAction: '${ctx}/order.json?style=jTable',
                deleteAction: '/Demo/DeleteStudent',
                updateAction: '/Demo/UpdateStudent',
                createAction: '/Demo/CreateStudent'
            },
            toolbar: {
                items: [{
                    tooltip: 'Click here to export this table to excel',
                    icon: '/Content/images/Misc/excel.png',
                    text: 'Export to Excel',
                    click: function () {
                        alert('This item is just a demonstration for new toolbar feature. You can add your custom toolbar items here. Then, for example, you can download excel file from server when user clicks this item. See toolbar in API reference documentation for usage.');
                    }
                }]
            },
            fields: {
                id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                //CHILD TABLE DEFINITION FOR "PHONE NUMBERS"
                Phones: {
                    title: '',
                    width: '5%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/phone.png" title="Edit phone numbers" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#OrderTableContainer').jtable('openChildTable',
                                    $img.closest('tr'),
                                    {
                                        title: studentData.record.Name + ' - Phone numbers',
                                        actions: {
                                            listAction: '/Demo/PhoneList?StudentId=' + studentData.record.StudentId,
                                            deleteAction: '/Demo/DeletePhone',
                                            updateAction: '/Demo/UpdatePhone',
                                            createAction: '/Demo/CreatePhone?StudentId=' + studentData.record.StudentId
                                        },
                                        fields: {
                                            PhoneId: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },
                                            PhoneType: {
                                                title: 'Phone type',
                                                width: '30%',
                                                options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
                                            },
                                            Number: {
                                                title: 'Phone Number',
                                                width: '30%',
                                                inputClass: 'validate[required]'
                                            },
                                            RecordDate: {
                                                title: 'Record date',
                                                width: '20%',
                                                type: 'date',
                                                displayFormat: 'yy-mm-dd',
                                                create: false,
                                                edit: false
                                            }
                                        },
                                        formCreated: function (event, data) {
                                            data.form.validationEngine();
                                        },
                                        formSubmitting: function (event, data) {
                                            return data.form.validationEngine('validate');
                                        },
                                        formClosed: function (event, data) {
                                            data.form.validationEngine('hide');
                                            data.form.validationEngine('detach');
                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                //CHILD TABLE DEFINITION FOR "EXAMS"
                Exams: {
                    title: '',
                    width: '5%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/note.png" title="Edit exam results" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#OrderTableContainer').jtable('openChildTable',
                                    $img.closest('tr'), //Parent row
                                    {
                                        title: studentData.record.Name + ' - Exam Results',
                                        actions: {
                                            listAction: '/Demo/ExamList?StudentId=' + studentData.record.StudentId,
                                            deleteAction: '/Demo/DeleteExam',
                                            updateAction: '/Demo/UpdateExam',
                                            createAction: '/Demo/CreateExam?StudentId=' + studentData.record.StudentId
                                        },
                                        fields: {
                                            StudentExamId: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },
                                            CourseName: {
                                                title: 'Course name',
                                                width: '40%',
                                                inputClass: 'validate[required]'
                                            },
                                            ExamDate: {
                                                title: 'Exam date',
                                                width: '30%',
                                                type: 'date',
                                                displayFormat: 'yy-mm-dd',
                                                inputClass: 'validate[required,custom[date]]'
                                            },
                                            Degree: {
                                                title: 'Degree',
                                                width: '10%',
                                                options: ["AA", "BA", "BB", "CB", "CC", "DC", "DD", "FF"]
                                            }
                                        },
                                        formCreated: function (event, data) {
                                            data.form.validationEngine();
                                        },
                                        formSubmitting: function (event, data) {
                                            return data.form.validationEngine('validate');
                                        },
                                        formClosed: function (event, data) {
                                            data.form.validationEngine('hide');
                                            data.form.validationEngine('detach');
                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                orderName: {
                    title: 'orderName',
                    width: '20%',
                    inputClass: 'validate[required]'
                },
                email: {
                    title: 'Email address',
                    list: false,
                    inputClass: 'validate[required,custom[email]]'
                },
                phoneNumber: {
                    title: 'User Password',
                    type: 'password',
                    list: false,
                    inputClass: 'validate[required]'
                },
                Gender: {
                    title: 'Gender',
                    width: '11%',
                    list: false,
                    options: { 'M': 'Male', 'F': 'Female' }
                },
                CountryId: {
                    title: 'Country',
                    options: '/Demo/GetCountryOptions',
                    list: false
                },
                createdAt: {
                    title: 'Birth date',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    inputClass: 'validate[required,custom[date]]'
                },
                errorMessage: {
                    title: 'Education',
                    list: false,
                    type: 'radiobutton',
                    options: { '1': 'Primary school', '2': 'High school', '3': 'University' },
                    inputClass: 'validate[required]'
                },
                status: {
                    title: 'About this person',
                    type: 'textarea',
                    list: false
                },
                status: {
                    title: 'Status',
                    width: '12%',
                    type: 'checkbox',
                    values: { 'false': 'Passive', 'true': 'Active' },
                    defaultValue: 'true'
                },
                createdAt: {
                    title: 'Record date',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    create: false,
                    edit: false,
                    sorting: false //This column is not sortable!
                }
            },
            formCreated: function (event, data) {
                data.form.validationEngine();
            },
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            }
        });
        //Load person list from server
        $('#OrderTableContainer').jtable('load');

        //Select current theme on combobox
        //$('#ThemeCombobox').val('metro/blue/jtable.css');

        //Change theme when chaned combobox
        /* $('#ThemeCombobox').change(function () {
            location.href = '/?jTableStyle=' + $('#ThemeCombobox').val();
        }); */
    });

</script>
<s:head />
</head>
<body>

<div id="OrderTableContainer">
</div>
	
</body>

</html>
